<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { Card } from 'ant-design-vue';

import { registerMap } from 'echarts';

import HenanMap from '../../../assets/河南省.json';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
// 注册地图
registerMap('henan', HenanMap as any);
// 配置地图的 ECharts 选项

const data = [
  { name: '郑州市', value: 300 },
  { name: '洛阳市', value: 200 },
  { name: '开封市', value: 100 },
  { name: '南阳市', value: 50 },
  { name: '信阳市', value: 80 },
  { name: '安阳市', value: 120 },
  { name: '新乡市', value: 90 },
  { name: '许昌市', value: 70 },
  { name: '周口市', value: 60 },
  { name: '漯河市', value: 40 },
  { name: '驻马店市', value: 30 },
  { name: '平顶山市', value: 20 },
  { name: '鹤壁市', value: 10 },
  { name: '焦作市', value: 5 },
  { name: '濮阳市', value: 15 },
  { name: '三门峡市', value: 25 },
  { name: '商丘市', value: 35 },
  { name: '信阳地区', value: 45 },
  { name: '南阳地区', value: 55 },
  { name: '周口地区', value: 65 },
  { name: '驻马店地区', value: 75 },
  { name: '济源市', value: 85 },
];
const mapOptions = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}', // 显示地区名称和数据值
  },
  visualMap: {
    min: 0,
    max: 500,
    left: 'left',
    top: 'bottom',
    text: ['高', '低'],
    calculable: true,
    inRange: {
      color: ['#e0ffff', '#d70913'], // 颜色渐变
    },
  },
  series: [
    {
      type: 'map',
      map: 'henan',
      label: {
        show: true,
      },
      data,
      universalTransition: true, // 启用过渡动画
    },
  ],
  title: {
    subtext: '数据来自网络',
    text: '河南省',
  },
  animationDuration: 1000,
};
// const barOption = {
//   xAxis: {
//     type: 'value',
//   },
//   yAxis: {
//     type: 'category',
//     axisLabel: {
//       rotate: 30,
//     },
//     data: data.map((item) => item.name),
//   },
//   animationDurationUpdate: 1000,
//   series: {
//     type: 'bar',
//     id: 'population',
//     data: data.map((item) => item.value),
//     universalTransition: true,
//   },
// };
// 渲染地图
renderEcharts(mapOptions as any);
// let target = 'map';
// setInterval(() => {
//   // 更新数据
//   if (target === 'map') {
//     target = 'bar';
//     renderEcharts(barOption as any);
//   } else {
//     target = 'map';
//     renderEcharts(mapOptions as any);
//   }
// }, 1000);
</script>
<template>
  <Card title="各个市区受骗统计">
    <EchartsUI ref="chartRef" />
  </Card>
</template>

<style lang="scss" scoped></style>
